<script setup>
import {ref} from 'vue'

const exchangeList = ref([])
const showMy = ref(false)
const formRef = ref(null)
const showHim = ref(false)
const radio = ref('1')
const form = ref({
    bookName: '',
    msg: ''
})

const rules = {
    bookName: [
        {required: true, message: '书名不能为空', trigger: 'blur'}
    ],
    msg: [
        {required: true, message: '信息不能为空', trigger: 'blur'},
    ]
}

const doAddExchange = () => {

}
</script>

<template>
    <div class="main wrapper clearfix">
        <p>书籍交换功能已于2023年12月1日弃用（悲）</p>
        <div class="contain">
            <h2>当前交换清单</h2>
            <div class="head">
                <div class="e-id">ID</div>
                <div class="e-name">书名</div>
                <div class="e-userName">姓名</div>
                <div class="e-msg">信息</div>
                <div class="e-status">状态</div>
            </div>
            <div class="e-list">
                <ul>
                    <li v-for="item in exchangeList" :key="item.id">
                        <div class="e-id"><span >{{ item.id }}</span></div>
                        <div class="e-name"><span >{{ item.name }}</span></div>
                        <div class="e-userName"><span >{{ item.user_name }}</span></div>
                        <div class="e-msg"><span >{{ item.msg }}</span></div>
                        <div class="e-status"><span >{{ item.status }}</span></div>
                        <div><button class="r-button" v-show="item.user_id !== userStore.userInfo.id" @click="showHim = true; exchange(item.id)">请求交换</button></div>
                    </li>
                </ul>
            </div>
            <button class="m-button" @click="showMy = true">发布交换</button>
        </div>
    </div>
    <el-dialog title="填写交换信息" v-model="showMy" width="30%" center>
        <el-form ref="formRef" :model="form" :rules="rules" status-icon>
            <el-form-item prop="bookName" label="书名">
                <el-input placeholder="请填写书名" v-model="form.bookName" />
            </el-form-item>
            <el-form-item prop="msg" label="信息">
                <el-input placeholder="请填写信息" v-model="form.msg" />
            </el-form-item>
            <el-button @click="doAddExchange">确认提交</el-button>
        </el-form>
    </el-dialog>

    <el-dialog title="请选择你要交换的书籍" v-model="showHim" width="30%" center>
        <el-radio-group v-model="radio">
            <el-radio v-for="item in 3" :key="item.id" label="">{{111}}</el-radio>
        </el-radio-group>
    </el-dialog>
</template>

<style scoped>
.head {
    position: relative;
    height: 32px;
    line-height: 32px;
    margin: 5px 0 10px;
    padding: 5px 0;
    background: #f3f3f3;
    border: 1px solid #e9e9e9;
    border-top: 0;
}

.e-list {
    border: 1px solid #8b8b8b;
    height: 300px;
    overflow: auto;
}

.head>div,
li>div
{
    float: left;
    margin-right: 5px;
}

li {
    height: 30px;
    border-bottom: 1px solid #8b8b8b;
}

li>div {
    height: 30px;
    border-right: 1px solid black;
}

li div:last-child {
    border: 0;
}

button {
    color: #ffffff;
    background-color: #b1191a;
    border: 0;
}

.r-button {
    height: 26px;
    padding: 0 10px;
    margin-left: 90px;
    margin-top: 2px;
}

.e-id {
    width: 100px;
}

.e-name {
    width: 200px;
}

.e-userName {
    width: 200px;
}

.e-msg {
    width: 300px;
}

.e-status {
    width: 100px;
}

p {
    text-align: center;
    font-size: 20px;
}

span {
    line-height: 30px;
    font-size: 16px;
    margin-right: 10px;
}

.m-button {
    float: right;
    margin-top: 10px;
    padding:5px 30px;
    font-size: 20px;
    border-radius: 20px;
}
</style>